<template>
  <div class="content">
    <div class="siyuDiv">
      <TitleVue :name="'降水预报'" />
      <div class="modelOne">
        <div v-for="item in weaList" :key="item.id" class="day-wea-item">
          <div class="date flex-column">
            <span>周{{ item.day }}</span>
            <span>{{ item.date }}</span>
          </div>
          <div class="wea flex-column">
            <i style="font-size: 30px" :class="`qi-${item.iconDay}-fill`"></i>
            <span>{{ item.textDay }}</span>
          </div>
          <!-- <div class="temp flex-column">
            <span>{{ item.tempMin }}℃</span>
            <span>{{ item.tempMax }}℃</span>
          </div> -->
        </div>
      </div>
      <!-- <div class="wdEcharts">
        <div id="mychart" ref="chartRef"></div>
      </div> -->
    </div>
    <div class="ldtDiv">
      <TitleVue :name="'雷达图'" />
      <div class="imgDiv">
        <img src="@/assets/img/common/tyldt.png" />
      </div>
    </div>
    <div class="yjDiv">
      <div class="modelTwoContent">
        <div class="yjTitle">
          <p>视频预警</p>
          <p>已处理{{ spyj.ycl }}/预警总数{{ spyj.total }}</p>
        </div>
        <el-progress :percentage="(spyj.ycl / spyj.total) * 100" :color="'#06C0CB'" :stroke-width="20" :show-text="false"></el-progress>
        <div class="yjTitle" style="margin-top: 1.5vh">
          <p>工情预警</p>
          <p>已处理{{ gqyj.ycl }}/预警总数{{ gqyj.total }}</p>
        </div>
        <el-progress :percentage="(gqyj.ycl / gqyj.total) * 100" :color="'#B8C14B'" :stroke-width="20" :show-text="false"></el-progress>
      </div>
    </div>
    <div class="siguanDiv">
      <TitleVue :name="'设备在线率'" />
      <div class="sbzxlDiv">
        <ybpEcharts :id="'ysqEcharts'" :title="'雨水情监测'" :val="95" />
        <ybpEcharts :id="'dbaqjcEcharts'" :title="'大坝安全监测'" :val="100" />
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import ybpEcharts from '../echarts/ybpEcharts.vue'
import * as echarts from 'echarts'

export default {
  name: 'ZlRight',
  components: {
    TitleVue,
    ybpEcharts
  },
  data() {
    return {
      weaList: [
        {
          id: 1,
          day: '一',
          date: '03-27',
          iconDay: '101',
          textDay: '多云',
          tempMin: 22,
          tempMax: 32
        },
        {
          id: 2,
          day: '二',
          iconDay: '100',
          date: '03-28',
          textDay: '晴',
          tempMin: 23,
          tempMax: 28
        },
        {
          id: 3,
          day: '三',
          iconDay: '102',
          date: '03-29',
          textDay: '少云',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 4,
          day: '四',
          date: '03-30',
          iconDay: '104',
          textDay: '阴',
          tempMin: 23,
          tempMax: 29
        },
        {
          id: 5,
          day: '五',
          date: '03-30',
          iconDay: '100',
          textDay: '晴',
          tempMin: 23,
          tempMax: 33
        },
        {
          id: 6,
          day: '六',
          date: '03-30',
          iconDay: '305',
          textDay: '小雨',
          tempMin: 23,
          tempMax: 30
        },
        {
          id: 7,
          day: '日',
          date: '03-30',
          iconDay: '101',
          textDay: '多云',
          tempMin: 23,
          tempMax: 30
        }
      ],
      dataList: [
        {
          name: '雨情预报',
          gq24h: 0,
          wl24xh: 8,
          unit: 'mm'
        },
        {
          name: '水情预报',
          gq24h: 1107.03,
          wl24xh: 1107.52,
          unit: 'm'
        },
        {
          name: '入库流量预报',
          gq24h: 8,
          wl24xh: 10,
          unit: 'm³/s'
        },
        {
          name: '预警信息发布',
          gq24h: 3,
          // wl24xh: 0,
          unit: '条'
        }
      ],
      spyj: {
        ycl: 8,
        total: 10
      },
      gqyj: {
        ycl: 5,
        total: 6
      },
      siguanList: [
        {
          name: '大坝巡查',
          val: 12,
          unit: '次'
        },
        {
          name: '无人机巡查',
          val: 13,
          unit: '次'
        },
        {
          name: '汛期检查',
          val: '25/03/28',
          unit: ''
        },
        {
          name: '除险加固',
          val: '25/03/15',
          unit: ''
        }
      ],
      ybyh: 6,
      zdyh: 0,
      yzgyh: 6,
      yhzgl: 100,
      myChart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(document.getElementById('mychart'))
      var minList = this.weaList.map((item) => {
        return item.tempMin
      })
      var min = Math.min(...minList)
      var maxList = this.weaList.map((item) => {
        return item.tempMax
      })
      var max = Math.max(...maxList)
      console.log(min, max)

      const options = {
        // 设置内边距
        grid: {
          bottom: 18,
          top: 18,
          left: '3%',
          right: '3%'
        },
        xAxis: {
          type: 'category',
          data: this.weaList.map((item) => item.day),
          // 取消刻度线
          axisTick: {
            show: false
          },
          // 取消x轴
          axisLine: {
            show: false
          },
          // 取消坐标值
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          // 设置y轴范围
          min: max + 1,
          max: min - 2
        },
        series: [
          {
            data: this.weaList.map((item) => item.tempMin),
            type: 'line',
            showSymbol: true,
            // 显示温度
            label: {
              show: true,
              position: 'bottom',
              formatter: '{c} °C',
              color: '#fff'
            },
            lineStyle: {
              color: '#4e7795'
            },
            itemStyle: {
              color: '#4e7795'
            }
          },
          {
            data: this.weaList.map((item) => item.tempMax),
            type: 'line',
            showSymbol: true,
            label: {
              show: true,
              position: 'top',
              formatter: '{c} °C',
              color: '#fff'
            },
            lineStyle: {
              color: '#4e7795'
            },

            itemStyle: {
              color: '#4e7795'
            }
          }
        ]
      }
      // 设置图表配置项
      this.myChart.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
::v-deep .el-progress-bar__outer {
  background-color: transparent !important;
  border: 2px solid #0d528a !important;
}
::v-deep .el-progress {
  margin: 0.8vh 0 !important;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .siyuDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .modelOne {
      width: 100%;
      height: auto;
      padding: 0vh 1.2vw 1vh;
      box-sizing: border-box;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.5vh;
      color: #fff;
      display: flex;
      column-gap: 1vh;
      .day-wea-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        flex: 1;
        z-index: 100;
        &.active {
          border: 2px solid #184f71;
        }
      }
    }
    // .wdEcharts {
    //   width: 100%;
    //   height: 8vh;
    //   #mychart {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }
  }
  .ldtDiv {
    width: 100%;
    height: 30vh;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    .imgDiv {
      flex: 1;
      padding: 1vh 1.2vw;
      box-sizing: border-box;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .yjDiv {
    width: 100%;
    height: auto;
    backdrop-filter: blur(0px);
    margin-bottom: 8px;

    padding: 0.5vw 0.5vw 0.3vw;
    box-sizing: border-box;
    background-color: #12395e;
    border: 1px solid #23649b;
    .yjTitle {
      padding: 0 1vh;
      display: flex;
      justify-content: space-between;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 1px;
      p:nth-child(1) {
        font-size: 1.7vh;
      }
      p:nth-child(2) {
        font-size: 1.5vh;
      }
    }
  }
  .siguanDiv {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    .sbzxlDiv {
      flex: 1;
      padding-bottom: px-to-vh(10px);
      display: flex;
      .echarts {
        width: 50%;
        height: 100%;
      }
    }
  }
}
</style>
